<template>
    <section>
        <!--工具条-->
        <template v-if="is_search">
            <div class="searchgrid">
                <div style="float: left;">
                    <el-date-picker
                            placeholder="请选择统计区间"
                            v-model="post_data.whereBetween.occur_time"
                            type="daterange"
                            align="right"
                            size="mini"
                            style="width:200px"
                            format="yyyy-MM-dd"
                            @change="changeSelect"
                            range-separator="至"
                            :picker-options="pickerOptions">
                    </el-date-picker>
                </div>
            </div>
        </template>

        <!--列表-->
        <el-table :data="forms.list"
                  highlight-current-row
                  v-loading="loading"
                  style="width: 100%;"
                  :row-style="showRow">
            <el-table-column label="代理ID" min-width="150px" show-overflow-tooltip class-name="list_agent">
                <template scope="scope">
                    <span v-if="scope.row._level" v-for="n in scope.row._level">&nbsp;&nbsp;.&nbsp;&nbsp;&nbsp;</span>
                    <i v-if="scope.row._expanded===0 && !scope.row._nomore" class="fa fa-plus-square fa-lg" @click="showChildren(scope)"></i>
                    <i v-else-if="scope.row._expanded===1 && !scope.row._nomore" class="fa fa-minus-square fa-lg" @click="hideChildren(scope.row)"></i>
                    <span v-else-if="scope.row._nomore===1">&nbsp;&nbsp;.&nbsp;</span>
                    <span style="margin-left: 10px">{{ scope.row.agent_id }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="agent.agent_name" label="名称" show-overflow-tooltip></el-table-column>
            <el-table-column prop="agent.agent_level" label="级别" show-overflow-tooltip></el-table-column>
            <el-table-column prop="agent.parent_id" label="归属代理" show-overflow-tooltip></el-table-column>
            <el-table-column prop="max_performance" label="直属最大配资峰值" show-overflow-tooltip></el-table-column>
            <el-table-column prop="total_performance" label="总最大配资峰值" show-overflow-tooltip></el-table-column>
        </el-table>

        <!--工具条-->
        <div class="pagination">
            <el-col :span="24" class="toolbar">
                <el-pagination
                        @size-change="changeSize"
                        @current-change="pageChange"
                        :current-page="post_data.offset/post_data.limit+1"
                        :page-sizes="[15, 30, 45, 60]"
                        :page-size="post_data.limit"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="forms.count"
                        style="float:left;">
                </el-pagination>
            </el-col>
        </div>
    </section>
</template>

<script>
    import {agentMaxPerformanceReports, agentMaxPerformanceReportsChildren} from '../../api/report';
    export default {
        props: ['sfid', 'no_search'],
        data() {
            return {
                pickerOptions: {
                    shortcuts: [
                        {
                            text: '本月',
                            onClick(picker) {
                                let now = new Date();
                                let start = now.getFullYear() + "-" + (now.getMonth() + 1) + "-01";
                                picker.$emit('pick', [start, now]);
                            }
                        },
                        {
                            text: '最近一周',
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                                picker.$emit('pick', [start, end]);

                            },
                        },
                        {
                            text: '最近一个月',
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                                picker.$emit('pick', [start, end]);
                            }
                        },
                        {
                            text: '最近三个月',
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                                picker.$emit('pick', [start, end]);
                            }
                        }]
                },
                is_search: true,
                loading: false,
                forms: {},
                date_range: "",
                post_data: {
                    where: {
                        agent_id: ''
                    },
                    whereBetween: {
                        occur_time: ''
                    },
                    count: true,
                    offset: 0,
                    limit: 15,
                    order: 'id desc'
                },
                total_sum: {}
            }
        },
        created(){
            let now = new Date();
            let start = now.getFullYear() + "-" + (now.getMonth() + 1) + "-01";
            let end = now.getFullYear() + "-" + (now.getMonth() + 1) + "-" + now.getDate() + ' 23:59:59';
            this.post_data.whereBetween.occur_time = [start, end];
            if (this.sfid) this.is_search = false;
            this.getList();
        },
        methods: {

            getList: function () {
                this.loading = true;
                agentMaxPerformanceReports(this.post_data).then(res => {
                    this.loading = false;
                    if (res.status === 0) return this.ezNotifyAxiosThen(res);
                    this.forms.count = res.data.count; //必须分开不然有bug
                    if (this.isUserSystemAdmin) res.data.list.push(res.data.props.sum);
                    this.forms.list = res.data.list.map((item, index) => {
                        if (item.agent_id == '合计') return item;
                        if (index == 0 && !this.isUserSystemAdmin) {
                            item._level = 0;
                            item._expanded = -1;//默认不展开 1展开 2变成. -1空白
                            item._show = true;
                            return item;
                        }
                        item._level = 0;
                        item._expanded = 0;
                        item._show = true;
                        return item;
                    });
                }).catch(error => this.ezNotifyAxiosCatch(error));
            },
            showChildren: function (scope) {
                if (scope.row.loadChildren) {
                    //如果已经load过children 则直接展开
                    return scope.row._expanded = 1;
                }
                let children_post_data = {
                    limit: 0,
                    whereBetween: {occur_time: this.post_data.whereBetween.occur_time},
                    where: {agent_id: scope.row.agent_id}
                };
                this.loading = true;
                agentMaxPerformanceReportsChildren(children_post_data).then(res => {
                    this.loading = false;
                    if (res.status === 0) return this.ezNotifyAxiosThen(res);
                    if (!res.data.list || !res.data.list.length) {
                        scope.row._expanded = 1;
                        scope.row._nomore = 1;
                        scope.row.loadChildren = true;
                        return;
                    }
                    let children_list = res.data.list.map((item, index) => {
                        item._level = scope.row._level + 1;
                        if (item._level > 3) item._nomore = 1;//最多5级代理商
                        item._expanded = 0;
                        item._show = scope.row;
                        return item;
                    });
                    scope.row._expanded = 1;
                    scope.row.loadChildren = true;
                    this.forms.list.splice(scope.$index + 1, 0, ...children_list);//插入children数据
                }).catch(error => console.log(error));
            },
            hideChildren: function (row) {
                row._expanded = 0;
            },
            pageChange: function (index) {
                this.post_data.offset = (index - 1) * this.post_data.limit;
                this.getList();
            },
            changeSize: function (num) {
                this.post_data.offset = 0;
                this.post_data.limit = num;
                this.getList();
            },
            search: function () {
                this.post_data.offset = 0;
                this.getList();
            },
            changeSelect: function ($value) {
                this.post_data.whereBetween.occur_time = $value.split("至");
                this.post_data.whereBetween.occur_time[1] = this.post_data.whereBetween.occur_time[1] + ' 23:59:59';
                this.post_data.offset = 0;
                this.getList();
            },
            showRow: function (row, index) {
                if (typeof(row._show) == "object") {
                    if (row._show._expanded) {
                        return '';
                    } else {
                        row._expanded = 0;
                        return 'display:none;';
                    }
                } else if (row.agent_id == "合计") {
                    return 'background-color:rgb(202, 232, 234)';
                } else {
                    return row._show ? '' : 'display:none;';
                }
            }
        }
    }
</script>

<style>
    .el-date-table td.next-month, .el-date-table td.prev-month {
        color: #ddd !important;
    }

    .list_agent {
        text-align: left !important;
    }
</style>
